<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="robots" content="none" />
</title>
<script src='http://code.jquery.com/jquery-git.js' type='text/javascript'></script>


<script src="http://gui-tare.googlecode.com/git/gui.js?toolkit=true" type="text/javascript"></script>
</head>

<body onload="onload();">
<script type="text/javascript">
// 


function test(id)
{
	var fenetre = $gui.createGui(id,{center: 'xy'});
}

function convert(id)
{
    var w = $('#' + id);
    $gui.compileToXml(w.get(0));
    alert('consult your console to verify the xml');
}

function save()
{
	if(typeof(Storage)!=="undefined")
	{
		localStorage.uixml = $('#ui').val();
		localStorage.js = $('#js').val();
		localStorage.css = $('#css').val();
		location.reload();
	}
	else
	{
		console.warning('-> The Storage APIs are not fully supported in this browser.');
		alert('The Storage APIs are not fully supported in this browser.');
		
	}
}

function onload()
{
	if(typeof(Storage)!=="undefined")
	{
		if (localStorage.uixml) $('#ui').val(localStorage.uixml);

		if (localStorage.js) $('#js').val(localStorage.js);
		if (localStorage.css) $('#css').val(localStorage.css);
//			save();
	}
}

function reset()
{
	if(typeof(Storage)!=="undefined")
	{
		if (localStorage.uixml) localStorage.removeItem('uixml');
		if (localStorage.js) localStorage.removeItem('js');
		if (localStorage.css) localStorage.removeItem('css');
		location.reload();
	}
}

if(typeof(Storage)!=="undefined")
{
	if (localStorage.js) {
		var script=document.createElement('script');
		script.type='text/javascript';
		$(script).text(localStorage.js);
		$("body").append(script);
	}
	if (localStorage.css) {
		var style=document.createElement('style');
		style.type='text/css';
		$(style).text(localStorage.css);
		$("head").append(style);
	}
}


</script>
<button onclick="test('test');">test</button><br />
<button onclick="convert('test');">test to export to xml</button><br />
ui.xml :<br />
<textarea id="ui" style="width:100%;height:100px">
<?xml version="1.0" encoding="utf-8"?>
<gui version="0.1">
	<window id='test' style="width: 450px;height: 200px;" data-title="test" data-options="">

	</window>
</gui>
</textarea><br/>
plugin.js :<br />
<textarea id="js" style="width:100%;height:250px">
//
(function() {

// insert your plugin name here
// eg : var mypluginname = 'darkpoulpo-button';

var mypluginname = 'darkpoulpo-button'; // change it

$(window).data('gui').plugins[mypluginname] =
{

  // makeHTML is called to create the html elements
  // options are in your ui.xml
  makeHTML : function(params)
  {
    /*
    params.options['titlebar-fixe'];
	
	
	params.parent
	
	params.xml
    */

	
    var obj = document.createElement("div"); // don't erase
    // obj.setAttribute('data-type', mypluginname);  // deprecied, uncomment if u make a window plugin
	param.parent.appendChild(obj); //add
	
	obj.setAttribute('data-effect','legend');  // see the wiki (makeyourplugin)
	
	/*
	 uncomment if you have any childrens
	
		guiTareNameSpace.executeChildrensPlugin(param.xml,obj);
		see the inline, vertical, groupbox plugins
	*/

	/*  edit your code here

		var txt = params.xml.getAttribute('text');
		obj.setAttribute('data-effect','');
		if (txt) $(obj).text(txt);
	*/


    return  obj; // don't erase
		// return null if error
  },

	 // this api can make a button element in your ui.xml
  // for the future gui creator
  // return a element or null if error
  makeXML : function(xml)
  {
		var element = xml.ownerDocument.createElement(mypluginname); // don't erase

		/* edit your code here

		element.setAttribute('text',this.jquery.text());


		*/

		return element; // don't erase
		// return null if error
  },
	enable : function(flag)
  {
	if (flag !== undefined && flag !== null)
	{
		if (flag == true || flag == false) this[0].disabled = flag;
		return this;
	} else {
		return (this[0].disabled == false);
	}
  },
  
  readonly : function(flag)
  {
	if (flag !== undefined && flag !== null)
	{	
		if (flag == true || flag == false) this[0].readOnly = flag;
		return this;
	} else {
		return this[0].readOnly;
	}
  },
  
  value : function(val)
  {
	if (val !== undefined && val !== null)
	{
		this[0].value = val;
		return this;
	} else {
		return this[0].value;
	}
  },
   
  autofocus : function(flag)
  {
	if (flag !== undefined && flag !== null)
	{
		if (flag == true || flag == false) this[0].autofocus = flag;
		return this;
	} else {
		return this[0].autofocus;
	}
  },
  
  check : function(flag)
  {
	if (flag !== undefined && flag !== null)
	{
		if (flag == true || flag == false) this[0].checked = flag;
		return this;
	} else {
		return this[0].checked;
	}
  },
  
	api1 : function()
	{},
	api2 : function()
	{}

  }
})();
</textarea><br/>
plugin.css :<br />
<textarea id="css" style="width:100%;height:250px">
/*  my bouton  */
/*
   css that all options should not be changed in a theme must have the keyword !important
*/


div[data-type="darkpoulpo-button"] {
        text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 2px;
        padding-bottom: 2px;
        width: auto;
        height: auto;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        color: black;
        background: #DDD;
}


div[data-type="darkpoulpo-button"]:hover {
        color: #222;
        background: #999;
}


div[data-type="darkpoulpo-button"]:active {
        border: 2px ridge white;
        color: #222;
        background: #999;
}
</textarea><br/>

<button onclick="save();">Save</button><button onclick="reset();">Reset</button>
</body>
</html>